<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超炫酷的jQuery卷轴展开动画DEMO演示</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style>
	/*通用样式*/
body{
    font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    font-size: 14px;
    background: #6f0b02;
}
.center{
    width: 1000px;
    margin: 0 auto 0;
}
/*content*/
.content{
    position: relative;
    width: 900px;
    height: 460px;
    margin: 40px auto;
}
.l-pic-index{
	/*display:none;*/
    position: absolute;
    left: 400px;
    top: 1px;
    z-index:2;
    width:50px;
    height:460px;
    background: url("images/j1.png") no-repeat right 0;
}
.r-pic-index{
	/*display:none;*/
    position: absolute;
    right: 400px;
    top: 0;
    z-index: 2;
    width:50px;
    *width:82px;
    height:460px;
    background: url("images/j4.png") no-repeat left 0;
}
.l-bg-index{
    position: absolute;
    top: -3px;
    left: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("images/j2.png") right 0 no-repeat;
}
.r-bg-index{
    position: absolute;
    top:-4px;
    right: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("images/j3.png") 0 0 no-repeat;
}
.main-index{
    display: none;
    overflow: hidden;
    zoom:1;
    position: absolute;
    z-index: 5;
    width:530px;
    height:280px;
    left:145px;
    top:90px;
    color: #2e2e2e;
}
.intro-text{
    margin: 10px 0 0 44px;
    line-height: 1.8;
    text-indent: 30px;
}
</style>
</head>
<body>
<div class="content">
	<div class="l-pic-index"></div>
	<div class="r-pic-index"></div>
	<div class="l-bg-index"></div>
	<div class="r-bg-index"></div>
	<div class="main-index">
		<p class="intro-text">
			传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。
		</p>
	</div>
</div>

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
	 $(document).ready(function(){
			//卷轴展开动画效果
			$(".l-pic-index").animate({'left':'95px','top':'-4px'},1300);
			$(".r-pic-index").animate({'right':'-23px','top':'-5px'},1450);
			$(".l-bg-index").animate({'width':'433px','left':'73px'},1500);
			$(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){
				$(".main-index").fadeIn(800);
			});
		});
</script>
</body>
</html>